<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{padding:0; margin:0;}
        ul{
            width:620px;
            height:500px;
            margin:50px auto;
            list-style: none;
        }
        ul li{
            width:116px; height:91px;
             border-right: solid 1px #bbb;
            border-bottom: solid 1px #bbb;
            border-top: 1px solid #dcdcdc;
            border-left: 1px solid #dcdcdc;
            background: #ededeb;
            float: left;
            margin:5px 5px 0 0;
        }
        ul li img{
            width:100px; height:75px;
            border-left: solid 1px #bbb;
            border-top: solid 1px #bbb;
            border-bottom: 1px solid #dcdcdc;
            border-right: 1px solid #dcdcdc;
            padding:2px;
            background: #fff;
            margin-top:5px; margin-left:5px;
        }
        ul li img:hover{
            width:200px; height:150px; border: solid 1px #010103;
            z-index: 999;
            position: relative;
            left:-50px;
            top:-37px;
        }
    </style>
</head>
<body>
    <ul>
        <li><a href="#"><img src="images/photo01.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/photo02.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/photo03.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/photo04.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/photo05.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/photo06.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/photo07.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/photo01.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/photo01.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/photo01.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/photo01.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/photo02.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/photo03.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/photo04.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/photo05.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/photo06.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/photo07.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/photo01.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/photo01.jpg" alt=""></a></li>
        <li><a href="#"><img src="images/photo01.jpg" alt=""></a></li>
    </ul>
</body>
</html>